<template>
  <view class="video-wrapper" v-if="url">
    <view class="close-btn" @click="$emit('close')">×</view>
    <video
      class="player"
      :src="url"
      :poster="poster"
      :controls="true"
      :autoplay="true"
      :loop="false"
      :muted="false"
      :show-center-play-btn="true"
      :enable-progress-gesture="true"
      :initial-time="0.1"
      playsinline
      webkit-playsinline
      x5-video-player-type="h5"
      x5-video-player-fullscreen="true"
      x5-playsinline="true"
      @error="onVideoError"
    ></video>
  </view>
  <view v-else class="empty">
    <text>无效的视频地址</text>
  </view>
</template>

<script>
export default {
  name: 'VideoFull',
  props: {
    url: {
      type: String,
      default: ''
    },
    poster: {
      type: String,
      default: ''
    }
  },
  methods: {
    onVideoError(err) {
      console.error('视频播放错误: ', err)
      uni.showToast({ title: '视频播放失败', icon: 'none' })
    }
  }
}
</script>

<style lang="scss" scoped>
.video-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  z-index: 9999;
}
.close-btn {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40rpx;
  z-index: 10000;
}
.player {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.empty {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  z-index: 9999;
}
</style>


